<template>
	<view class="tag">
		<view class="line" v-for="(item, index) in data" :key="index">
			<image class="line-icon" :src="item.icon"></image>
			<view class="line-text">{{ item.name }}</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
</script>

<style lang="scss" scoped>
	.tag {
		margin: 20rpx 0;
		display: flex;
		width: 100%;
		white-space: nowrap;
		overflow: auto;

		.line {
			display: flex;
			align-items: center;
			height: 60rpx;
			padding: 0 20rpx;
			background: #FFF0E8;
			border-radius: 12rpx;
			.line-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			.line-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F1692B;
			}
		}
		.line+.line {
			margin-left: 10rpx;
		}

	}
</style>